<template>
  <view class="empty" v-if="!list.length">
    <u-empty mode="data"></u-empty>
  </view>
  <view class="list" v-if="list.length">
    <view class="item" v-for="(item, index) in list" :key="item.id">
      <navigator class="item-info flex-ac" url="/subpkg_shop/shop/index" hover-class="none">
        <up-image :show-loading="true" :src="item.shopLogo" width="123rpx" height="123rpx" radius="19rpx" mode="aspectFill"></up-image>
        <view class="info flex1">
          <view class="flex-ac">
            <text>{{ item.shopName }}</text>
            <view class="info-label cfff f22">{{ item.product.length }}件商品</view>
          </view>
          <text class="desc qoverDot f26">{{ item.desc }}</text>
        </view>
      </navigator>
      <view class="item-product">
        <scroll-view :scroll-x="true" class="gui-scroll-x" :show-scrollbar="false">
          <view class="product flex-ac">
            <view class="product-item" v-for="(itemProdct, indexProduct) in item.product" :key="itemProdct.id">
              <up-image :show-loading="true" :src="itemProdct.img" width="222rpx" height="222rpx" radius="19rpx 19rpx 0rpx 0rpx" mode="aspectFill"></up-image>
              <view class="product-info">
                <text class="title qoverDot2 f20">{{ itemProdct.title }}</text>
                <text class="price f24">￥{{ itemProdct.price }}</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const props = defineProps({
  list: {
    type: Array,
    default: []
  }
});
</script>

<style lang="scss">
.list {
  padding-top: 30rpx;
  padding-bottom: 20rpx;

  .item {
    padding: 0 25rpx 0 30rpx;
    margin-bottom: 30rpx;

    .item-info {
      .info {
        margin-left: 20rpx;

        .info-label {
          background: #ffca42;
          border-radius: 10rpx;
          margin-left: 20rpx;
          padding: 8rpx;
        }

        .desc {
          color: #888888;
          margin-top: 12rpx;
        }
      }
    }

    .item-product {
      margin-top: 24rpx;

      .gui-scroll-x {
        width: 695rpx;
      }

      .product-item {
        margin-right: 14rpx;

        &:last-child {
          margin-right: 0;
        }

        .product-info {
          border: 1px solid #ececec;
          border-radius: 0 0 19rpx 19rpx;
          padding: 10rpx 10rpx 10rpx 16rpx;
          color: #3e3e3e;

          .price {
            color: #e26b6b;
          }
        }
      }
    }
  }
}
</style>
